<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>artDialog demo</title>
<meta name="keywords" content="javascript对话框,弹出层,窗口,拖动" />
<meta name="description" content="artDialog是一个轻巧且高度兼容的javascript对话框组件，可让你的网页交互拥有桌面软件般的用户体验" />
<link id="artDialogSkin" href="skin/aero/aero.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="artDialog.js"></script>
<link href="_demo/demo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="_demo/demo.js"></script>
</head>
<body>
<div id="bg"><img src="_demo/bg.jpg" /></div>
<div id="page">
  <h1>artDialog <em>v 2.0.9 Beta, 2010-05-02</em> </h1>
  <h4> <a href="http://code.google.com/p/artdialog/" target="_blank">http://code.google.com/p/artdialog/</a></h4>
  <fieldset>
    <legend>简介</legend>
    <div class="content">
      <p>artDialog是一个轻巧且高度兼容的javascript对话框组件，可让你的网页交互拥有桌面软件般的用户体验。</p>
      <p>功能： 支持锁定屏幕(遮罩)、模拟alert和confirm、多窗口弹出、静止定位、支持Ese键关闭对话框、定时关闭、自定义位置、拖动、鼠标调节窗口大小、换肤、穿越框架..</p>
      <h3>优点</h3>
      <ol class="love">
        <li><strong>兼容主流浏览器</strong>: 支持 Firefox, Chrome, Safari, IE6+, Opera ..</li>
        <li><strong>自适应内容</strong>: 无需预设高宽, 对话框与按钮自适应消息内容的大小</li>
        <li><strong>容错</strong>: 如果定义的宽度高度小于内容大小不会出现错位, 并且支持消息框大小拖动调节</li>
        <li><strong>轻巧</strong>: js压缩后8KB左右 <span class="tips">(在js内嵌了核心兼容布局CSS的情况下)</span></li>
        <li><strong>智能对齐</strong>: 如果设置了对话框宽度，短文本居中长文本居左对齐</li>
        <li><strong>IE6无抖动静止定位</strong>: 在 IE6 下可实现与现代浏览器一样完美静止定位效果</li>
        <li><strong>智能定位</strong>: 使用自定义坐标的时候智能修正位置, 不会超出边界 <span class="tips">(适用于弹出菜单)</span></li>
        <li><strong>拖动流畅</strong>: 不会粘住鼠标也不会拖出浏览器视口导致无法控制</li>
        <li><strong>皮肤支持</strong>: 九宫格布局, CSS类名钩子与结构丰富, 制作自适应皮肤相当简易</li>
        <li><strong>IE6遮盖下拉控件支持</strong>: 支持 IE6 下覆盖下拉控件 <span class="tips">(注:半透明皮肤不支持)</span></li>
      </ol>
    </div>
  </fieldset>
  <fieldset>
    <legend id="d_api">接口</legend>
    <div class="content">
      <h3>配置参数</h3>
      <ul class="api">
        <li><strong>content</strong>: {消息内容,支持HTML}</li>
        <li><strong>title</strong>: {标题.默认:'提示'}</li>
        <li><strong>lock</strong>: {是否锁定屏幕. 默认:false}</li>
        <li><strong>width</strong>: {宽度,支持em等单位. 默认:'auto'}</li>
        <li><strong>height</strong>: {高度,支持em等单位. 默认:'auto'}</li>
        <li><strong>url</strong>: {iframe地址,存在content参数时候,此参数无效}</li>
        <li><strong>left</strong>: {x坐标,可以使用关键字,如:left/right/center. 默认:'center'}</li>
        <li><strong>top</strong>: {y坐标,可以使用关键字,如:top/bottom/center. 默认:'center'(并非绝对垂直居中，而是使用的黄金比例)}</li>
        <li><strong>fixed</strong>: {是否启用静止定位. 默认:false}</li>
        <li><strong>time</strong>: {多少秒自动关闭}</li>
        <li><strong>style</strong>: {对话框风格扩展参数,写入自定义className,详情见皮肤css文件的定义,多个用空格隔开}</li>
        <li><strong>yesText</strong>: {确定按钮文本. 默认:'确定'}</li>
        <li><strong>noText</strong>: {取消按钮文本. 默认:'取消'}</li>
        <li><strong>id</strong>: {给对话框定义id. id参数可以防止重复弹出}</li>
        <li><strong>parent</strong>: {是否在父页面弹出, 适用于框架页面, 如果父页面不存在则默认本页. 默认:false}</li>
      </ul>
      <h3>形式</h3>
      <p>artDialog({ 配置参数 }, function(){ 确定按钮回调函数 }, function(){ 取消按钮回调函数 }, function(){ 对话框关闭后的回调函数 }) 如:</p>
      <em>(注：确定与取消按钮的回调函数可以不指定，但执行回调函数完成后会关闭对话框，你可以让回调函数返回false阻止其关闭)</em>
      <pre><code>artDialog(
        {	
            content:'欢迎你来到对话框世界！',
            lock:true,
            style:'succeed noClose'
        },
        function(){
            alert('你点了确定');
        },
        function(){
            alert('你点了取消');
        }
);</code></pre>
      <div class="runCode">
        <pre><textarea rows="3" id="runCode">artDialog({content:'hello world!'})</textarea>
</pre>
        <div class="btn">
          <button id="runCodeBtn">运行代码</button>
        </div>
      </div>
    </div>
  </fieldset>
  <fieldset>
    <legend id="d_demo">展示</legend>
    <em>(这里仅仅展示一点点，实际应用需要您去设置artDialog配置，或者增加功能)</em>
    <div class="content">
      <ul>
        <li>
          <button id="btn1">图片</button>
        </li>
        <li>
          <button id="btn2">外部页面</button>
          <button id="btn2Goto">改变地址</button>
          <button id="btn2Close">关闭</button>
        </li>
        <li>
          <button id="btn3">动画</button>
        </li>
        <li>
          <button id="btn4">询问</button>
        </li>
        <li>
          <button id="btn5">锁屏</button>
        </li>
        <li>
          <button id="btn6">弹出菜单</button>
        </li>
        <li>
          <button id="btn7">广告</button><button id="btn7Close">关闭</button>
        </li>
      </ul>
      <iframe class="iframeDemo" src="_demo/iframe.html"></iframe>
      <p> 风格:
        <!--[if gte IE 7]><!-->
      <label title="artDialog默认风格">
        <input name="skin" type="radio" id="skin_0" value="1" checked="checked" />
        aero</label>
  
      <label title="google chrome风格[支持IE6下覆盖下拉控件]">
        <input type="radio" name="skin" value="2" id="skin_1" />
        chrome</label>
 
      <label title="facebook风格">
        <input type="radio" name="skin" value="3" id="skin_2" />
        facebook</label>
      <label title="无背景图片">
        <input type="radio" name="skin" value="4" id="skin_3" />
        mini</label>
      <label>
        <input type="radio" name="skin" value="5" id="skin_4" />
        more..</label>
        <div id="skinMenu">
        	<a id="showBg" href="#">开启背景图片预览半透明效果</a>
        </div>
        <!--<![endif]-->
        <!--[if IE 6]>
        <a href="skin/aero/index.html" target="_blank"l title="artDialog默认风格">aero</a> | <a href="skin/chrome/index.html" target="_blank title="google chrome风格[支持IE6下覆盖下拉控件]"">chrome</a> | <a href="skin/facebook/index.html" target="_blank" title="facebook风格">facebook</a> | <a href="skin/mini/index.html" target="_blank title="无背景图片"">mini</a>
		<![endif]-->
      </p>
    </div>
  </fieldset>
  <fieldset>
    <legend>建议</legend>
    <ul class="content">
      <li>锁屏功能是用来显示非常重要的操作或者消息，相当于一个漂亮的alert。它作用就是中断用户操作，而不是用来炫耀，所以那些交互比较频繁的网站尽量少用锁屏，可以参考一下facebook等一些网站优秀的交互设计。</li>
      <li>非必要无需开启静止定位，它总是静止在一个位置同样会干预用户操作</li>
      <li>
        <p>默认半透明皮肤'aero'在IE6下会有点占用客户端资源。可以针对IE6单独使用的不透明chrome皮肤，针对IE7+与火狐等现代浏览器使用默认皮肤：</p>
        <pre><code>&lt;!--[if gte IE 7]&gt;&lt;!--&gt;
&lt;link href=&quot;skin/aero/aero.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
&lt;!--&lt;![endif]--&gt;
  &lt;!--[if IE 6]&gt;
&lt;link href=&quot;skin/chrome/chrome.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
&lt;![endif]--&gt;</code></pre>
      </li>
      <li>请在定义了DOCTYPE的页面使用（很多HTML编辑器默认文档就已经添加） </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>作者</legend>
    <div class="content">
      <p>artDialog 的设计目标是尽量用CSS与合理的XHTML架构方案解决复杂的兼容问题，提供更为简易的皮肤制作机制，通过切换皮肤以适应更多的交互界面，如下拉菜单、广告、照片幻灯、播放器等。</p>
      <p>非常感谢网友给我的意见，自v2发布以来我一直在不断的兼容各种环境，但目前仍然无法做到尽善尽美。也许artDialog正式版会对此进行取舍，我并不想让其设计过度，毕竟鱼和熊掌不可兼得。</p>
      <p>如果发现问题或者建议请给我发电子邮件。如果你对代码进行了优化，那也请您不吝给我一份吧，让它变得更好。</p>
      <p>注：artDialog v2在解决半透明皮肤支持IE6 (png 32)的时候加载了iepngfix，多窗口支持与拖动借鉴了popbox等一些‘前辈’的的优秀方法，在此感谢这些组件的作者。</p>
      <p>项目主页: <a href="http://code.google.com/p/artdialog/" target="_blank">http://code.google.com/p/artdialog/</a></p>
      <p class="about">唐斌, 热爱画画与WEB界面和交互设计. 欢迎臭味相投的朋友一起交流: <span id="myMail"></span>&nbsp;<a href="http://www.planeArt.cn/" target="_blank">www.planeArt.cn</a></p>
    </div>
  </fieldset>
  <a id="firebugLite" style="display:block;position:fixed;_position:absolute;z-index:2;top:5pt;right:15pt;width:38px;height:38px;text-indent:-99999em;overflow:hidden;text-align:left;border:2px solid #000;filter:alpha(opacity=60);opacity:0.6;background:url('http://getfirebug.com/releases/lite/1.2/firebug_logo.png') no-repeat 0 0;" href="#" onclick=" firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);this.style.display='none';return false" title="调试页面">firebug</a> </div>
<div style="display:none;">
  <script type="text/javascript">document.write('<scr'+'ipt src="http://s86.cnzz.com/stat.php?id=1581115&web_id=1581115" type="text/javascript" charset="gb2312"></sc'+'ript>');</script>
</div>
<noscript id="noscript">
请开启脚本执行权限
</noscript>
</body>
</html>
